<!DOCTYPE html>
<html lang="zh" class="no-js">
	<head>
    <meta charset="utf-8">
		<!-- begin _includes/seo.html --><title>Ohho,it's a bug：Carlalyz的网站</title>
		
	<meta name="description" content="Hey,look at me!">
	<meta property="og:type" content="article">
	<meta property="og:locale" content="zh_CN">
	<meta property="og:site_name" content="Carlalyz的网站">
	<meta property="og:title" content="Ohho,it's a bug">
	<meta property="og:url" content="http://carlalyz.gitee.io/carlas_new_warehouse/">
	<meta property="og:description" content="Hey,look at me!">
		
	<meta property="og:image" content="https://images.gitee.com/uploads/images/2019/0414/165430_870d45d7_2232011.jpeg">
		
	<meta property="article:published_time" content="2019-04-14 16:58:00">
		
	<link rel="canonical" href="http://carlalyz.gitee.io/carlas_new_warehouse/">
	
	<script type="application/ld+json">
    {
      "@context": "http://schema.org",
      "@type": "Person",
      "name": "李一鸣",
      "url": "http://carlalyz.gitee.io/carlas_new_warehouse/",
      "sameAs": null
    }
	</script>
	
	<!-- end _includes/seo.html -->
	
	<link href="/carlas_new_warehouse/index.html" type="application/atom+xml" rel="alternate" title="CarlalzyDESVG">

	<!-- http://t.co/dKP3o1e -->
	<meta name="HandheldFriendly" content="True">
	<meta name="MobileOptimized" content="320">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	
	<script>
		document.documentElement.className = document.documentElement.className.replace(/\bno-js\b/g, '') + ' js ';
	</script>
	
	<!-- For all browsers -->
<link rel="stylesheet" href="/minimal-mistakes/assets/css/main.css">

<!--[if lte IE 9]>
  <style>
    /* old IE unsupported flexbox fixes */
    .greedy-nav .site-title {
      padding-right: 10em;
    }
    .greedy-nav button {
      position: absolute;
      top: 0;
      right: 0;
      height: 100%;
    }
  </style>
<![endif]-->


    <!-- start custom head snippets -->

<!-- insert favicons. use https://realfavicongenerator.net/ -->

<!-- end custom head snippets --> 
	
	</head>
  <body class="layout--single"  bgcolor="antiquewhite">

    <!--[if lt IE 9]>
<div class="notice--danger align-center" style="margin: 0;">You are using an <strong>outdated</strong> browser. Please <a href="https://browsehappy.com/">upgrade your browser</a> to improve your experience.</div>
<![endif]-->

    <div class="masthead">
  <div class="masthead__inner-wrap">
    <div class="masthead__menu">
      <nav id="site-nav" class="greedy-nav">
        <a class="site-title" href="/carlas_new_warehouse/">Carlalyz的网站</a>
        <ul class="visible-links">

<div class="container">
    <form action="" class="parent">
        <input type="text" class="search" placeholder="搜索">
        <input type="button" name="" id="" class="btn">
    </form>
</div>
            
            <li class="masthead__menu-item">
              <a href="https://www.jianshu.com/u/0d2601159e06" >简书</a>
            </li>
          
            
            <li class="masthead__menu-item">
              <a href="https://weibo.com/2677534540/profile?rightmod=1&wvr=6&mod=personinfo" >微博</a>
            </li>
            
            <li class="masthead__menu-item">
              <a href="https://gitee.com/Carlalyz" >gitee</a>
            </li>
           
        	<li class="masthead__menu-item">
              <a href="https://github.com/Carlalyz" >Github</a>
            </li>
            
            <li class="masthead__menu-item">
              <a href="" >关于我</a>
            </li>
          
        </ul>
        
<div class="page__hero--overlay"
    	style=" background-image: url('/minimal-mistakes/images/study6.jpg');">
  
    <div class="wrapper">
      <h1 id="page-title" class="page__title" itemprop="headline">
          SVG实验基地   
      </h1>
        <p class="page__lead">Hey,look at me!</p>     
    </div>
    
    <span class="page__hero-caption">Photo credit: <strong>hand-painted</strong></a></span>  
</div>

<div id="main" role="main">
  
  <div class="sidebar sticky">
  
<div itemscope itemtype="http://schema.org/Person">

    <div class="author__avatar">
 
        <img src="https://images.gitee.com/uploads/images/2019/0414/165430_870d45d7_2232011.jpeg" height="200" width="200" alt="Carlalyz" itemprop="image">
      
    </div>
    
  <div class="author__content">
    
      <h3 class="author__name" itemprop="name">Carlalyz</h3>
    
    
      <p class="author__bio" itemprop="description">
        2018级 中山大学南方学院 文学与传媒学院 网络与新媒体 学生
      </p>
    
  </div>
  
  <div class="author__urls-wrapper">
      
        <li itemprop="homeLocation" itemscope itemtype="http://schema.org/Place">
          <i class="fas fa-fw fa-map-marker-alt" aria-hidden="true"></i> <span itemprop="name">广东-茂名</span>
        </li>
        
        <li>
          <a href="mailto:1730773697@qq.com">
            <meta itemprop="email" content="1730773697@qq.com" />
            <i class="fas fa-fw fa-envelope-square" aria-hidden="true"></i> 电子邮箱
          </a>
        </li>
        
      <!--
  <li>
    <a href="http://link-to-whatever-social-network.com/user/" itemprop="sameAs">
      <i class="fas fa-fw" aria-hidden="true"></i> Custom Social Profile Link
    </a>
  </li>
-->
    </ul>
  </div>
</div>

<div class="wrapper">
		<svg width="30%" height="30%" viewBox="0 0 612 612" xmlns="https://codepen.io/kdbkapsere/pen/NmgNvN" xmlns:xlink="https://codepen.io/kdbkapsere/pen/NmgNvN">
			<title>sun</title>
			<defs>
				<style type="text/css">
					<![CDATA[
					@-webkit-keyframes spin {
						0% {
							-webkit-transform: scale(0.1) rotate(0deg);
							transform: scale(0.1) rotate(0deg);
							opacity:0.4;
						}
						50% {
							-webkit-transform: scale(1) rotate(360deg);
							transform: scale(1) rotate(360deg);
							opacity:1;
						}
						55%{
						    -webkit-transform: scale(1);
							transform: scale(1);
							opacity:1;
						}
						60%{
						-webkit-transform: scale(0.5);
						transform: scale(0.5);
						opacity:0.4;
						}
						70%{
						    -webkit-transform: scale(1);
							transform: scale(1);
							opacity:1;
						}
						80%{
						-webkit-transform: scale(0.5);
						transform: scale(0.5);
						opacity:0.4;
						}
						90%{
						-webkit-transform: scale(1);
						transform: scale(1);
						opacity:1;
						}
						100%{
						-webkit-transform: scale(0.1);
						transform: scale(0.1);
						opacity:0.4;
						}
					}
					@keyframes spin {
						0% {
							-webkit-transform: scale(0.1) rotate(0deg);
							transform: scale(0.1) rotate(0deg);
							opacity:0.4;
						}
						50% {
							-webkit-transform: scale(1) rotate(360deg);
							transform: scale(1) rotate(360deg);
							opacity:1;
						}
						55%{
						    -webkit-transform: scale(1);
							transform: scale(1);
							opacity:1;
						}
						60%{
						-webkit-transform: scale(0.5);
						transform: scale(0.5);
						opacity:0.4;
						}
						70%{
						    -webkit-transform: scale(1);
							transform: scale(1);
							opacity:1;
						}
						80%{
						-webkit-transform: scale(0.5);
						transform: scale(0.5);
						opacity:0.4;
						}
						90%{
						-webkit-transform: scale(1);
						transform: scale(1);
						opacity:1;
						}
						100%{
						-webkit-transform: scale(0.1);
						transform: scale(0.1);
						opacity:0.4;
						}
					}
					.heart_Wrapper {
						-webkit-animation: spin 5s linear 0s infinite ;
						animation: spin 5s linear 0s infinite;
						-webkit-transform-origin: 50% 50%;
						transform-origin: 50% 50%;
						
					}
					.wrapper {
						padding: 5rem;
						margin: 5rem;
					}
					]]>
				</style>
				
			</defs>
    <!-- DAY -->
    <!-- SUNNY -->
 <svg xmlns="http://www.w3.org/2000/svg" width="700" height="500">
<svg x="-50" y="250" color="orange" weight=20% height=20% aria-hidden="true" focusable="false" data-prefix="fas" data-icon="grin-tongue-wink" class="svg-inline--fa fa-grin-tongue-wink fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512"><path fill="currentColor" d="M344 184c-13.3 0-24 10.7-24 24s10.7 24 24 24 24-10.7 24-24-10.7-24-24-24zM248 8C111 8 0 119 0 256c0 106.3 67 196.7 161 232-5.6-12.2-9-25.7-9-40v-45.5c-24.7-16.2-43.5-38.1-47.8-63.8-2-11.8 9.3-21.5 20.7-17.9C155.1 330.5 200 336 248 336s92.9-5.5 123.1-15.2c11.5-3.7 22.6 6.1 20.7 17.9-4.3 25.7-23.1 47.6-47.8 63.8V448c0 14.3-3.4 27.8-9 40 94-35.3 161-125.7 161-232C496 119 385 8 248 8zm-56 225l-9.5-8.5c-14.8-13.2-46.2-13.2-61 0L112 233c-8.5 7.4-21.6.3-19.8-10.8 4-25.2 34.2-42.1 59.9-42.1S208 197 212 222.2c1.6 11.1-11.6 18.2-20 10.8zm152 39c-35.3 0-64-28.7-64-64s28.7-64 64-64 64 28.7 64 64-28.7 64-64 64zm-50.9 102.6c-14.4-6.5-31.1 2.2-34.6 17.6l-1.8 7.8c-2.1 9.2-15.2 9.2-17.3 0l-1.8-7.8c-3.5-15.4-20.2-24.1-34.6-17.6-.9.4.3-.2-18.9 9.4v63c0 35.2 28 64.5 63.1 64.9 35.7.5 64.9-28.4 64.9-64v-64c-19.5-9.6-18.2-8.9-19-9.3z"></path></svg>
			<g>
				<circle cx="270" cy="190" r="25" fill="red"></circle>
				<g>
					<circle cx="300" cy="310" r="50" fill="transparent"></circle>
				<animateTransform attributeName="transform" from ="0 100 300 " 
					to="360 100 300 " type="rotate" begin="0s" dur="10s" repeatCount="indefinite">
				</animateTransform>
			
				</g> 

				<animateTransform attributeName="transform" from ="0 300 300 " 
					to="360 300 300 " type="rotate" begin="0s" dur="20s" repeatCount="indefinite">
				</animateTransform>
			</g>
	 
	 
	 
	 
	 	 			<g>
				<circle cx="220" cy="380" r="25" fill="green"></circle>
				<g>
					<circle cx="50" cy="300" r="10" fill="transparent"></circle>
				<animateTransform attributeName="transform" from ="0 100 300 " 
					to="360 100 300 " type="rotate" begin="0s" dur="10s" repeatCount="indefinite">
				</animateTransform>
			
				</g> 

				<animateTransform attributeName="transform" from ="0 300 300 " 
					to="360 300 300 " type="rotate" begin="0s" dur="20s" repeatCount="indefinite">
				</animateTransform>
			</g>
	 

	 
	 
	 
	 			<g>
				<circle cx="330" cy="410" r="25" fill="blue"></circle>
				<g>
					<circle cx="310" cy="300" r="50" fill="transparent"></circle>
				<animateTransform attributeName="transform" from ="0 100 300 " 
					to="360 100 300 " type="rotate" begin="0s" dur="10s" repeatCount="indefinite">
				</animateTransform>
			
				</g> 

				<animateTransform attributeName="transform" from ="0 300 300 " 
					to="360 300 300 " type="rotate" begin="0s" dur="20s" repeatCount="indefinite">
				</animateTransform>
			</g>
			
	 
	 
	 	 
	 			<g>
				<circle cx="410" cy="330" r="25" fill="purple"></circle>
				<g>
					<circle cx="300" cy="300" r="50" fill="transparent"></circle>
				<animateTransform attributeName="transform" from ="0 100 300 " 
					to="360 100 300 " type="rotate" begin="0s" dur="10s" repeatCount="indefinite">
				</animateTransform>
			
				</g> 

				<animateTransform attributeName="transform" from ="0 300 300 " 
					to="360 300 300 " type="rotate" begin="0s" dur="20s" repeatCount="indefinite">
				</animateTransform>
			</g>
	 
	 
	 
	 			<g>
				<circle cx="380" cy="220" r="25" fill="black"></circle>
				<g>
					<circle cx="300" cy="300" r="50" fill="transparent"></circle>
				<animateTransform attributeName="transform" from ="0 100 300 " 
					to="360 100 300 " type="rotate" begin="0s" dur="10s" repeatCount="indefinite">
				</animateTransform>
			
				</g> 

				<animateTransform attributeName="transform" from ="0 300 300 " 
					to="360 300 300 " type="rotate" begin="0s" dur="20s" repeatCount="indefinite">
				</animateTransform>
			</g>
	 
	 
	 
	 
	 	 			<g>
				<circle cx="190" cy="270" r="25" fill="yellow"></circle>
				<g>
					<circle cx="300" cy="300" r="50" fill="transparent"></circle>
				<animateTransform attributeName="transform" from ="0 100 300 " 
					to="360 100 300 " type="rotate" begin="0s" dur="10s" repeatCount="indefinite">
				</animateTransform>
			
				</g> 

				<animateTransform attributeName="transform" from ="0 300 300 " 
					to="360 300 300 " type="rotate" begin="0s" dur="20s" repeatCount="indefinite">
				</animateTransform>
			</g>
	 
	 
	 
			
		</svg>




</div>
	</body>
</html>
